// flexible.js
(function () {
  const baseSize = 16
  const designWidth = 390
  const maxScale = 1.2
  const minScale = 0.2

  function setRem() {
    const html = document.documentElement
    const clientWidth = html.clientWidth || window.innerWidth
    const scale = clientWidth / designWidth
    const newScale = Math.max(minScale, Math.min(maxScale, scale))
    console.log(
      "Device width：html.clientWidth=" + html.clientWidth + "、window.innerWidth=" + window.innerWidth + "；Before-scale=",
      scale + "；New-scale=",
      newScale
    )
    html.style.fontSize = `${newScale * baseSize}px`
  }
  setRem()
  if (window.ResizeObserver) {
    const ro = new ResizeObserver(() => setRem())
    ro.observe(document.documentElement)
  } else {
    window.addEventListener("resize", setRem)
  }
})()